<html>
<head>
    <meta charset="UTF-8"/>
    <title>王者荣耀论坛</title>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/common-new.css"/>
    <link rel="stylesheet" href="../css/index.css"/>
    <link rel="stylesheet" href="../css/search.css"/>
    <link rel="stylesheet" href="../css/index-new.css"/>
    <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../js/hm-bbs.js"></script>
</head>
<body>
<div id="app">
    <!-- 头部 -->
    <div class="hm-top-nav">
        <div class="hm-inner clearfix">
            <div class="hm-inner-l l"></div>
            <div class="hm-inner-r r">
                <div class="box">
                    <a href="javascript:;" id="login" class="to-login">游客登录</a>
                    <a href="register.html">【新用户注册】</a>
                    <div id="dialogBg"></div>
                    <div id="dialog" class="animated">
                        <img class="dialogIco" width="50" height="40" src="../images/ico.png"/>
                        <div class="dialogTop" style="height:25px;">
                            <a href="javascript:;" class="closeDialogBtn">关闭</a>
                        </div>
                        <form action="user/login.do">
                            <ul class="editInfos">
                                <li>用户名：<input type="text" id="userName" name="userName" class="ipt"/></li>
                                <li>密&nbsp;&nbsp;&nbsp;码：<input type="password" id="userPass" name="userPass"
                                                                class="ipt"/></li>
                                <li><input type="submit" value="登录" class="submitBtn"/></li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 主体部分 -->
    <div class="hm-header"></div>
    <div class="hm-body hm-body-bgc">
        <div class="hm-inner">
            <div class="hm-banner"></div>


            <!--头部，帖子统计，搜索-->
            <div class="hm-bbs-info">
                <div class="hm-bbs-icon l" style="width:130px;">
                    <span><img src="../images/bbs-icon.png" height="80"/></span>
                </div>
                <div class="hm-bbs-info-in l" style="margin-left:30px;">
                    <div class="t clearfix"><h2 class="l">王者荣耀</h2></div>
                    <p>
                        <span>今日帖子<strong>{{count}}</strong></span>
                        <span>全部帖子<strong>{{countAll}}</strong></span>
                    </p>
                </div>
                <div class="search-box l">
                    <form action="javascript:;">
                        <input type="text" class="txt l" v-model="keyword" placeholder="请输入关键字">
                        <input type="button" @click="findArticleByKeyword(keyword)" value="搜索" class="btn l"/>
                    </form>
                </div>
            </div>


            <!-- 导航 -->
            <ul class="hm-bbs-nav border-lrb clearfix">
                <li :class="zone.zoneid==zoneid?'current':''" v-for="zone in zoneList">
                    <a href="#"><em></em>{{zone.zonename}}</a>
                </li>
                <!--<li>-->
                    <!--<a href="#"><em></em>BUG反馈区</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a href="#"><em></em>新闻公告区</a>-->
                <!--</li>-->
                <!--<li>-->
                    <!--<a href="#"><em></em>活动专区</a>-->
                <!--</li>-->
            </ul>


            <!-- 主体部分 -->
            <div class="hm-bbs-main border-lrb clearfix">
                <!-- 左侧列表 -->
                <div class="list-view l">
                    <ul>


                        <li :class="article.istop==1?'clearfix ding':'clearfix'" v-for="article in articleList">
                            <div class="hm-index-title">
                                <i class="set-to-top">顶</i> <a href="javascript:void(0)" @click="toGetArticle(article.articleid)">{{article.title}}</a>
                            </div>
                            <div class="hm-index-con">{{article.content}}</div>
                            <div class="hm-index-info l">
                                <span class="article-username">{{article.sendername}}</span>
                                <span class="post-time">{{formatDate(article.sendtime)}}</span>
                            </div>
                            <div class="hm-index-fun r">
                                <span class="icon-like"><i></i>{{article.upvotecount}}</span>
                                <span class="icon-talk"><i></i>{{article.browsecount}}</span>
                            </div>
                        </li>


                        <!--<li class="clearfix ding">-->
                            <!--<div class="hm-index-title">-->
                                <!--<i class="set-to-top">顶</i> <a href="getArticle.html">求官方出艾琳英雄活动</a>-->
                            <!--</div>-->
                            <!--<div class="hm-index-con">本人玩得迟，所以看到别人用艾琳的时候，特别羡慕，现贵族6了，很想要一个艾琳，我身边很多朋友也想要，求</div>-->
                            <!--<div class="hm-index-info l">-->
                                <!--<span class="article-username">晨曦初露</span><span-->
                                    <!--class="post-time">2017-05-24 08:00:05</span>-->
                            <!--</div>-->
                            <!--<div class="hm-index-fun r">-->
                                <!--<span class="icon-like"><i></i>1</span>-->
                                <!--<span class="icon-talk"><i></i>0</span>-->
                            <!--</div>-->
                        <!--</li>-->
                        <!--<li class="clearfix ding">-->
                            <!--<div class="hm-index-title">-->
                                <!--<i class="set-to-top">顶</i> <a href="getArticle.html">求官方出艾琳英雄活动</a>-->
                            <!--</div>-->
                            <!--<div class="hm-index-con">本人玩得迟，所以看到别人用艾琳的时候，特别羡慕，现贵族6了，很想要一个艾琳，我身边很多朋友也想要，求</div>-->
                            <!--<div class="hm-index-info l">-->
                                <!--<span class="article-username">晨曦初露</span><span-->
                                    <!--class="post-time">2017-05-24 08:00:05</span>-->
                            <!--</div>-->
                            <!--<div class="hm-index-fun r">-->
                                <!--<span class="icon-like"><i></i>1</span>-->
                                <!--<span class="icon-talk"><i></i>0</span>-->
                            <!--</div>-->
                        <!--</li>-->


                        <!--<li class="clearfix">-->
                            <!--<div class="hm-index-title">-->
                                <!--<i class="set-to-top">顶</i> <a href="getArticle.html">排位赛BUG，排不上！</a>-->
                            <!--</div>-->
                            <!--<div class="hm-index-con">现在黄金2，无论怎么匹配，都匹配不到？有次匹配了10分钟，这是为什么？</div>-->
                            <!--<div class="hm-index-info l">-->
                                <!--<span class="article-username">不哭不闹不炫耀</span><span-->
                                    <!--class="post-time">2017-05-24 09:10:00</span>-->
                            <!--</div>-->
                            <!--<div class="hm-index-fun r">-->
                                <!--<span class="icon-like"><i></i>3</span>-->
                                <!--<span class="icon-talk"><i></i>10</span>-->
                            <!--</div>-->
                        <!--</li>-->


                        <!--<li class="clearfix">-->
                            <!--<div class="hm-index-title">-->
                                <!--<i class="set-to-top">顶</i> <a href="getArticle.html">排位赛BUG，排不上！</a>-->
                            <!--</div>-->
                            <!--<div class="hm-index-con">现在黄金2，无论怎么匹配，都匹配不到？有次匹配了10分钟，这是为什么？</div>-->
                            <!--<div class="hm-index-info l">-->
                                <!--<span class="article-username">不哭不闹不炫耀</span><span-->
                                    <!--class="post-time">2017-05-24 09:10:00</span>-->
                            <!--</div>-->
                            <!--<div class="hm-index-fun r">-->
                                <!--<span class="icon-like"><i></i>3</span>-->
                                <!--<span class="icon-talk"><i></i>10</span>-->
                            <!--</div>-->
                        <!--</li>-->


                    </ul>
                </div>


                <!-- 右侧侧边栏,在线用户 -->
                <div class="aside l" >
                    <div class="aside-box">
                        <h3 class="t">
                            <a href="javascript:;">在线用户:{{listUser.length}}</a>
                        </h3>
                        <ul class="b clearfix" >
                            <li v-for="user in listUser">
                                <div><img src="../images/default.png" height="55"/></div>
                                <p>{{user.username}}</p>
                            </li>

                        </ul>
                    </div>
                </div>


            </div>
        </div>
    </div>


    <!-- 底部 -->
    <div class="hm-footer" style="padding-top:10px;">
        <div class="hm-inner">
            <div class="hm-footer-cpr">
                <p>Copyright@2006-2017 ITCAST. All Rights Reserved</p>
                <p>传智播客 版权所有</p>
            </div>
        </div>
    </div>

    <!-- 右边发帖，回顶部 -->
    <div class="fixedBar" id="j_fixedBar">
        <a id="newTopicBtn" href="javascript:;" class="newTopic"><span></span>发帖</a>
        <a href="#" class="goTop"><i></i><span>返回<br/>顶部</span></a>
    </div>

    <!-- 发帖弹出框 -->
    <form action="" method="post">
        <div class="pop-box ft-box">
            <div class="mask"></div>
            <div class="win">
                <div class="win_hd">
                    <h4 class="l">主题帖</h4><span class="close r">&times;</span>
                </div>
                <div class="win_bd">
                    <div class="win_bd_t">
                        <input type="text" id="title" v-model="article.title" name="title" placeholder="帖子标题"/>
                    </div>
                    <div class="win_bd_b">
                        <textarea id="content" name="content" v-model="article.content" placeholder="正文"></textarea>
                    </div>
                </div>
                <div class="win_ft">
                    <div class="win_ft_in">
                        <!--<input type="submit"  class="btn" value="发表"/>-->
                        <input type="button" @click="add()" class="btn" value="发表">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

</body>

</html>
<script type="text/javascript">
    $(function () {
        //显示弹框
        $('.box #login').click(function () {
            var className = $(this).attr('class');
            $('#dialogBg').fadeIn(300);
            $('#dialog').removeAttr('class').addClass('animated ' + className + '').fadeIn();
            $('#userName').focus();
            $("#j_fixedBar").hide();
        });

        //关闭弹窗
        $('.closeDialogBtn').click(function () {
            $('#dialogBg').fadeOut(300, function () {
                $('#dialog').addClass('bounceOutUp').fadeOut();
                $("#j_fixedBar").show();
            });
        });

        //查询用户是否登录
        $.post("user/findUser.do", {}, function (data) {

            alert(data);
        })
    });
</script>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>

    new Vue({
        el: "#app",
        data() {
            return {
                article: {},
                articleList:[],
                zoneList:[],
                zoneid:1,
                keyword:'',
                user:{},
                username:''

            }
        },
        methods: {
            add() {
                axios.post(`/web/article/add.do?zoneId=1`, this.article).then(response => {
                    if (response.data.code == 0) {
                        location.href = 'getArticle.html?articleid=' + this.article.articleid;
                    } else {
                        alert("添加失败");
                    }
                })
            },
            findArticleByDate() {
                axios.get('/web/article/findArticleByDate.do').then(response => {
                    this.count = response.data
                })
            },
            findArticleAllPosts(){
                axios.get('/web/article/findArticleAllPosts.do').then(response=>{
                    this.countAll =response.data
                })
            },
            findUserByLoginStatus(){
                axios.get('/web/user/findUserByLoginStatus.do').then(response=>{
                    this.listUser =response.data.loginUser;
                    // alert(this.listUser)
                })
            },
            findArticleList(){
                axios.get(`/web/article/findArticleListByZoneId.do?zoneId=1`).then(response => {
                    this.articleList = response.data;

                })
            },
            findZoneList(){
                axios.get(`/web/zone/findZoneList.do`).then(response => {
                    this.zoneList = response.data;
                })
            },
            toGetArticle(articleid){
                location.href = "getArticle.html?articleid=" + articleid;
            },
            //将日期的毫秒转为正常日期格式
            formatDate(sendtime){
                var time = new Date(sendtime);
                return time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate() + " "
                    + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
            },
            findArticleByKeyword(){
                axios.get(`/web/article/findArticleByKeyword.do?keyword=${this.keyword}`).then(response => {
                    if (response.data.message=='404'){
                        this.findZoneList();
                        this.findArticleList();
                    }
                    this.articleList = response.data;
                })
            }
        },
        created(){
            this.findZoneList();
            this.findArticleList();
            this.findArticleByDate();
            this.findArticleAllPosts();
            this.findUserByLoginStatus();

        }
    })

</script>